<template>
  <div>
    <el-dialog custom-class="dialog" title="菜单选择" width="44%" :modal-append-to-body="false" :before-close="handleClose"
               v-el-drag-dialog :visible="isShow">
      <div style="height: 48vh;overflow: auto;position: relative;">
        <el-tree highlight-current :key="timer" :data="tableData" :default-checked-keys="defaultCheckedData" :props="defaultProps" node-key="id"
                 ref="treeForm"
                 show-checkbox
                 @check-change="handleClick"
                 >
            <span class="slot-t-node" slot-scope="{ node, data }">
                <i :class="{'el-icon-s-grid primary': data.menuType==0, 'el-icon-menu':data.menuType==1}"/>
                <span>{{ data.name }}</span>
            </span>
        </el-tree>
      </div>
      <div class="dialog-button-slot">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="clicked" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .dialog {
    .el-dialog__header {
      border-bottom: 1px solid #eee;
    }
  }
  .dialog-button-slot {
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../../utils/utils.js'
  import {list} from '@/api/sysMenu'
  import {getMenus} from '@/api/sysMch';
  export default {
    directives: {elDragDialog},
    data() {
      return {
        clicked: false,
        disabled: true,
        isShow: false,
        tableData: [],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        rowData: [],
        defaultCheckedData:[],
        timer:''
      }
    },
    created() {

    },
    methods: {
      handleClick(){
          this.rowData = this.$refs.treeForm.getCheckedNodes().concat(this.$refs.treeForm.getHalfCheckedNodes())
          console.log(this.rowData)
      },
      treeControl (id) {
        var _this = this;
        const params = new URLSearchParams();
        params.append('id',id);
        getMenus(params).then(response => {
          console.log(response)
          _this.defaultCheckedData = utils.cleanTree(_this.tableData,response.data)
          _this.timer = new Date().getTime()
        }).catch(error => {

        })
      },
      show(id) {
        this.load(id)
      },
      handleClose() {
        this.isShow = false
      },
      confirm() {
        this.clicked = true
        this.isShow = false;
        this.$emit('confirm', this.rowData, (loading) => {
          this.clicked = loading
        })
      },
      load(id) {
        const _this = this
        const params = new URLSearchParams()
        list(params).then(response => {
          console.log(response)
          _this.tableData = response.data
          _this.treeControl(id);
          _this.isShow = true
        }).catch(error => {
        })
      }
    }
  }
</script>
